<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/overview' }">
            <h3>首页</h3>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/web/prolist' }">
            <h3>测试项目列表</h3>
        </el-breadcrumb-item>

    </el-breadcrumb>

    <!-- 添加一个卡片  -->
    <el-card class="box-card">

        <el-button @click="dialogFormVisible = true">添加项目</el-button>
        <el-button @click="onDelete">删除项目</el-button>
        <p v-for="(item, index) in pro_list.items" class="scrollbar-demo-item">
            <!-- {{ index }} -  -->
            {{ item.id }}--{{item.pro_name}} --- <a href="#">进入到测试用例集合</a>
            <!-- --{{item.pro_createtime}} -->
        </p>

        <!-- 对话框 -->
        <el-dialog v-model="dialogFormVisible" title="测试用例集合名称">
            <el-form :model="form">
                <el-form-item label="项目名称" >
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
                <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="Please select a zone">
                        <el-option label="Zone No.1" value="shanghai" />
                        <el-option label="Zone No.2" value="beijing" />
                    </el-select>
                </el-form-item> -->
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handlersure">确认</el-button>
                </span>
            </template>
        </el-dialog>

    </el-card>



</template>
  
<script setup>
//ref() 函数用来根据给定的值创建一个响应式的数据对象，
// ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性
//   1、scope.$index 代表拿到每一行的index
// 2、scope.row代表拿到每一行的数据
//    响应式数据  ref
// const obj = reactive({ name: "name" });
import { ref, reactive } from 'vue'               //处理响应式数据 ,需要导入
import { projectlist ,projectadd} from '../../../../api/pro_api'
import { ArrowRight } from '@element-plus/icons-vue'    //图标显示引用
import { create } from 'lodash';
import { ElMessage } from 'element-plus';



// 对话框是否显示
const dialogFormVisible = ref(false)


// 创建集合
const pro_list = reactive( {
    items:[
        {"id":1}
    ]
}
)

// 表单
const form = reactive({
  name: ''
})



// 查询目前创建的test case集合
function getprojlist() {
    projectlist().then(
        res =>{
            console.log(res);
            pro_list.items = res.data.data
        }
    ).catch( res =>{
        console.log(res);
        })

}

// 初始化 请求后台数据 
create()
{   
    // 获取创建测试用例的集合 
    getprojlist()
}



// 对话框点击确认后添加数据到列表中
function handlersure(){
    console.log(form.name);
    
    dialogFormVisible.value = false
   
    // 确定后给后台发送数据 
    projectadd(form).then(Response =>{
            console.log(Response);

            // 清理掉前一次输入的内容
            form.name =""
            ElMessage({
                message: Response.data.message,
                type: 'error',
            })
            
            // 再次获取集合的列表
            getprojlist()
    }).catch(
        Response =>{
            console.log(Response);
            ElMessage({
                message: Response.data.message,
                type: 'success',
            })

        }
    )

}

// 删除项目 
const onDelete = () => {
    ElMessage({
                message: '开发中,请等待...!',
                type: 'success',
            })
}



</script > 
  
<style lang="less" scoped>
.box-card {
    height: 100%;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

.el-button--text {
    margin-right: 15px;
}


.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>